<!DOCTYPE html>
<html>
<head>
    <title>文件服务器</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>文件服务器</h1>
    
    <div class="upload-form">
        <h2>上传文件</h2>
        <!-- 在上传表单中添加 name 输入框 -->
        <form id="uploadForm" enctype="multipart/form-data">
            <div>
                <label for="name">目录名：</label>
                <input type="text" name="name" id="name" placeholder="可选，若不填写将自动分类">
            </div>
            <div id="dragDropArea" style="border:2px dashed #409eff;padding:38px 0;margin-bottom:12px;text-align:center;border-radius:8px;background:#f4f8ff;color:#409eff;cursor:pointer;transition:background 0.2s;">
                <span id="dragDropHint" style="flex:1;">拖拽文件到此处上传，或点击下方选择文件</span>
            </div>
            <div style="display:none;">
                <label for="file">选择文件：</label>
                <input type="file" name="file" id="file">
            </div>
            <button type="submit">上传</button>
        </form>
        <div id="uploadStatus"></div>
    </div>

    <div class="tab-bar" style="margin-bottom:18px;">
        <button id="tabRecent" class="tab-btn tab-active" onclick="switchTab('recent')">最近上传</button>
        <button id="tabAll" class="tab-btn" onclick="switchTab('all')">全部文件</button>
    </div>
    <div id="tabContentRecent">
        <div class="file-card-list" id="recentFileCardList"></div>
    </div>
    <div id="tabContentAll" class="tab-content" style="display:none;">
        <div class="search-container">
            <input type="text" id="fileSearchInput" placeholder="搜索应用名称或包名">
            <button onclick="handleSearch()">搜索</button>
        </div>
        <div id="fileListContainer">
            <div class="file-card-list" id="fileCardList"></div>
        </div>
        <div class="file-list-header" style="margin-bottom: 10px;">
            <div id="pagination" style="padding-right:2em;"></div>
        </div>
    </div>
    <!-- 添加二维码弹出层 -->
    <div id="qrModal" class="qr-modal">
        <div class="qr-modal-content">
            <span class="close-modal" onclick="closeQRModal()">&times;</span>
            <img id="qrImage" src="" alt="二维码">
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>